<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>载入图片</title>
    <style>
        body{
            background: #000;
        }
        .icon-loading1{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(loading01.png);
            background-repeat: no-repeat;
            background-size: 40px 40px;
        }
        .icon-loading2{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(loading02.png);
            background-repeat: no-repeat;
            background-size: 40px 40px;
        }
        .icon-loading3{
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(loading03.png);
            background-repeat: no-repeat;
            background-size: 40px 40px;
        }
        @-webkit-keyframes rotating
        {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
        @keyframes rotating
        {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(359deg);
                transform: rotate(359deg);
            }
        }
        .icon-rotating{-webkit-animation:rotating .7s infinite linear;animation: rotating .7s infinite linear;}

    </style>
</head>

<body>
    <p><i class="icon-loading1 icon-rotating"></i></p>
    <p><i class="icon-loading2 icon-rotating"></i></p>
    <p><i class="icon-loading3 icon-rotating"></i></p>
</body>

</html>